import React, { Component } from "react";

export default class ErrorBoundary extends Component {
  static getDerivedStateFromError(error) {
    // 如果捕获到了错误，则将 flag 设置为 true
    return {
      hasError: true,
      errorInfo: error.toString(),
    };
  }

  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      errorInfo: "",
    };
  }

  render() {
    if (this.state.hasError) {
      // 当 hasError 为 true 时，显示一个用于占位的组件，提示运行时可能出了错误
      return (
        <div style={{ background: "red" }}>
          <h6>发生了点小错误</h6>
          <p>{this.state.errorInfo}</p>
        </div>
      );
    }
    return this.props.children;
  }
}
